<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>01 - 使用xyz加载地图</title>
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src='../lib/proj4/proj4.js'></script>
    <link rel='stylesheet' href='../css/ol6.4.3/ol.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script>
	const url = 'http://t4.tianditu.com/DataServer?T=vec_w&tk=a6bf5a2496115f58481b947040c83ae3&x={x}&y={y}&l={z}';
	// const url = 'http://192.168.106.167:8080/scgis/pic?level={z}&col={x}&row={y}';
	// const url = 'http://192.168.106.167:8080/scgis/gen?module=baidurd&level={z}&col={x}&row={y}';
	// const url = 'http://192.168.130.38:8080/baidumaps/roadmap/{z}/{x}/{y}';

	const resolutions = [];
	const maxZoom = 10;
	// 计算百度使用的分辨率
	for (let i = 3; i <= maxZoom; i++) {
		resolutions[i] = Math.pow(2, maxZoom - i);
	}

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions: resolutions
	});

	const baiduSource = new ol.source.TileImage({
		projection: 'EPSG:3857',
		tileGrid,
		tileUrlFunction: (tileCoord, pixelRatio, proj) => {
			let [z, x, y] = tileCoord;
			// 百度瓦片服务url将负数使用M前缀来标识
			if (x < 0) {
				x = -x;
			}
			if (y < 0) {
				y = -y;
			}
			return `http://192.168.130.38:8080/baidumaps/roadmap/${z}/${x}/${y}`;
		}
	});
	// 百度地图层
	const baiduMapLayer = new ol.layer.Tile({
		source: baiduSource
	});

	const map = new ol.Map({
		layers: [
			baiduMapLayer
		],
		target: 'map',
		view: new ol.View({
			// center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
			center: [0, 0],
			projection: 'EPSG:4326',
			zoom: 3,
			maxZoom: 10,
			minZoom: 3
		})
	});
</script>
</body>
</html>